<%@ page import="com.ws.lv.util.Res" %><%--
  Created by IntelliJ IDEA.
  User: Adminis
  Date: 2025/3/19
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/home/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/home/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/home/css/route-detail.css">
    <style>
        .topbar {
            position: relative
        }

        .hottel, .haslogin {
            position: absolute;
            top: 12px;
            right: 50px
        }

        .hottel p {
            cursor: pointer;
            font-weight: 700;
            float: left;
            width: 100px;
            border: 1px solid orange;
            text-align: center;
            height: 45px;
            line-height: 45px;
            margin-right: 10px
        }

        .hottel a {
            color: #666;
            text-decoration: none
        }

        .haslogin {
            top: 45px;
            right: 0
        }

        .haslogin p {
            font-weight: 700;
            float: left;
            margin-right: 30px;
            font-size: 18px
        }

        .company {
            background-color: whitesmoke;
            border-top: 3px solid rgba(15, 250, 231, 0.6);
        }

        .company .ctr {
            color: black;
            margin: 10px auto;
            font-size: 16px;
        }

        .ctrimg img {
            display: inline-block;
            width: 120px;
            height: 120px;
            vertical-align: middle;
            margin: auto 60px;
        }

        .prosum_left dd {
            position: relative; /* 确保子元素的绝对定位相对于这个容器 */
        }

        .down_img {
            position: absolute;
            top: 320px;
        }

        .tx {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            float: left;
            margin-top: -20px;
            margin-right: 10px;
        }


    </style>
</head>

<body>
<!--引入头部-->
<header id="header">

    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="${pageContext.request.contextPath}/home/images/logo.png" style="height: 60px;"
                                 alt=""></a>
            </div>
            <div class="search">
                <form action="${pageContext.request.contextPath}/homepage/toRoute_list" method="post">
                    <input name="route_name" type="text" placeholder="请输入路线名称"
                           class="search_input" autocomplete="off">
                    <button class="search-button" type="submit">搜索</button>
                </form>
            </div>

            <c:if test="${u!=null}">
                <div class="haslogin">
                    <p><a href="${pageContext.request.contextPath}/homepage/toMypage">
                        <img src="<%=Res.homeTxFileUrl%>${u.user_tx}" class="tx">
                        欢迎：${u.user_name}
                    </a>
                    </p>
                    <p><a href="${pageContext.request.contextPath}/user/outLogin">退出登录</a></p>
                </div>
            </c:if>
            <c:if test="${u==null}">
                <div class="hottel">
                    <a href="${pageContext.request.contextPath}/homepage/toHomeLogin"><p>登录</p></a>
                    <a href="${pageContext.request.contextPath}/homepage/toRegister"><p>注册</p></a>
                </div>
            </c:if>

        </div>
    </div>
</header>
<!-- 详情 start -->
<div class="wrap">
    <div class="bread_box">
        <a href="${pageContext.request.contextPath}/homepage/toHomePage">首页</a>
        <span> &gt;</span>
        <a href="${pageContext.request.contextPath}/homepage/toType?type_id=${route.type.type_id}">${route.type.type_name}</a><span> &gt;</span>
        <a href="${pageContext.request.contextPath}/homepage/toRoute_detail?route_id=${route.route_id}">${route.route_name}</a>
    </div>
    <div class="prosum_box">
        <dl class="prosum_left" style="height: 340px">
            <dt>
                <img alt="" class="big_img" src="<%=Res.mainFileUrl%>${route.routh_mainImage}">
            </dt>
            <dd>
                <a class="up_img up_img_disable"></a>
                <c:forEach items="${images}" var="image">
                    <a title="" class="little_img" data-bigpic="<%=Res.fuTuFileUrl%>${image.image_url}">
                        <img src="<%=Res.fuTuFileUrl%>${image.image_url}" width="570px" height="340px"/>
                    </a>
                </c:forEach>
                <a class="down_img down_img_disable"></a>

            </dd>
        </dl>
        <div class="prosum_right">
            <p class="pros_title">${route.route_name}</p>
            <p class="">
                出发地-> <b style="color: orange"> ${route.route_departure_place} </b>
                &nbsp;&nbsp;
                目的地-> <b style="color: orangered"> ${route.route_destination} </b>
                &nbsp;&nbsp;
                旅行天数 共<b style="color: orangered"> ${route.route_day} </b>天
            </p>

            <div class="pros_other">
                <p>商家：${route.supplier.supplier_name}</p>
                <p>咨询电话 : ${route.supplier.supplier_phone}</p>
                <p>地址 ： ${route.supplier.supplier_loc}</p>
            </div>
            <div class="pros_price">
                <p class="price"><strong>¥${route.route_price}</strong><span>起</span></p>
                <p class="collect" style="display: inline-block">
                    <c:if test="${u == null}">
                        <a class="btn"  href="${pageContext.request.contextPath}/homepage/toHomeLogin" >
                            <img src="${pageContext.request.contextPath}/home/images/xiadan.png" width="30px"
                                 height="30px" style="display: inline-block">
                            立即下单
                        </a>
                    </c:if>
                    <c:if test="${order_info == 'weidingdan'}">
                        <a class="btn" onclick="placeOrder()" id="dingdan" >
                            <img src="${pageContext.request.contextPath}/home/images/xiadan.png" width="30px" height="30px"  style="display: inline-block">
                            立即下单
                        </a>
                    </c:if>
                    <c:if test="${order_info == 'yidingdan'}">
                        <a class="btn already" disabled="disabled" id="dingdan">
                            已下单
                        </a>
                    </c:if>
                </p>
                <div style="display: inline-block; float: right;">
                    <c:if test="${u == null}">
                        <a href="${pageContext.request.contextPath}/homepage/toHomeLogin">
                            <img src="${pageContext.request.contextPath}/home/images/weishoucang.png" width="40px"
                                 height="40px" style="margin-left: 10px">
                        </a>
                    </c:if>

                    <c:if test="${save == 'weishoucang'}">
                        <a onclick="saveRoute()">
                            <img src="${pageContext.request.contextPath}/home/images/weishoucang.png" width="40px"
                                 height="40px" style="margin-left: 10px" id="scimg">
                        </a>
                    </c:if>

                    <c:if test="${save == 'shoucang'}">
                        <a onclick="saveRoute()">
                            <img src="${pageContext.request.contextPath}/home/images/shoucang.png" width="40px"
                                 height="40px" style="margin-left: 10px" id="scimg">
                        </a>
                    </c:if>
                    <span>已收藏<b id="saveNumber">${route.route_saveNumber}</b>次</span>
                </div>


            </div>
        </div>
    </div>
    <div class="you_need_konw">
        <span>旅游须知</span>
        <div class="notice">
            ${route.route_content}
        </div>
    </div>
</div>
<!-- 详情 end -->

<!--引入头部-->
<!-- 尾部 start-->
<footer id="footer">
    <div class="company">
        <div class="ctr">顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</div>
        <div class="ctr">
            顽石教育客服中心设立在江苏南京及江苏宿迁，来电显示号码请查看： 顽石教育会员中心外呼电话号码汇总
        </div>
        <div class="ctr">
            北京顽石教育国际旅行社有限公司，旅行社业务经营许可证编号：L-BJ-CJ00144　　上海顽石教育国际旅行社有限公司，旅行社业务经营许可证编号：L-SH-CJ00107
        </div>
        <div class="ctr">
            Copyright © 2006-2025 南京顽石教育科技有限公司 lzc.ws.com | 营业执照 | ICP证：苏B2-20130006 |
            苏ICP备12009060号-4
            | 苏网食备A32000000032 | 石家庄旅游网
        </div>
        <div class="ctr">
            关于我们 顽石教育经过多年打拼 终于在石家庄市获得了一席之地 这代表着我们公司及团队的成长与付出
            我们一直以“专业、高效、创新” 作为团队的精神 多年来打压着外部及内部的乐色公司 一步步往上爬 终于在2025年本公司的项目上市
            获得多平台联合认可 全国服务热线：400-888-8888
        </div>
        <div class="ctr">
            感谢大家这么长时的陪伴 愿我们的努力 为每一位顾客带来一份快乐
        </div>
        <div class="ctrimg">
            <img src="${pageContext.request.contextPath}/home/images/kuaishou.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/douyin.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/xiaomi.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/huawei.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/jiangbei.png" alt="">
            <img src="${pageContext.request.contextPath}/home/images/jingcha.png" alt="">
        </div>
    </div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/home/js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath}/home/js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="${pageContext.request.contextPath}/home/js/include.js"></script>
<script>
    $(document).ready(function () {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function () {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click', function () {
            var num = $('.little_img').length;
            if ((nextindex + 1) <= num) {
                $('.little_img:eq(' + picindex + ')').hide();
                $('.little_img:eq(' + nextindex + ')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click', function () {
            var num = $('.little_img').length;
            if (picindex > 0) {
                $('.little_img:eq(' + (nextindex - 1) + ')').hide();
                $('.little_img:eq(' + (picindex - 1) + ')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
        //自动播放
        var timer = setInterval("auto_play()", 5000);
    });

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }

    // 下单逻辑
    function placeOrder() {
        var routeId = "${route.route_id}";
        $.ajax({
            url: "${pageContext.request.contextPath}/homepage/placeOrder",
            type: "POST",
            data: { route_id: routeId },
            success: function(flag) {
                console.log(flag)
                if (flag) {
                    // 更新按钮状态
                    $('#dingdan').addClass("already")
                    $('#dingdan').text("已下单");
                    alert("下单成功可以在个人主页查看我的订单哦！");
                } else {
                    alert("下单失败，请误重复下单！");
                }
            }
        });
    }

    //收藏逻辑
    function saveRoute() {
        var routeId = "${route.route_id}";
        $.ajax({
            url: "${pageContext.request.contextPath}/homepage/saveRoute",
            type: "POST",
            data: { route_id: routeId },
            success: function(flag) {
                console.log(flag)
                if (flag) {
                    $('#scimg').attr('src', "${pageContext.request.contextPath}/home/images/shoucang.png");
                    $('#saveNumber').text(parseInt($('#saveNumber').text()) + 1)
                }else {
                    $('#scimg').attr('src', "${pageContext.request.contextPath}/home/images/weishoucang.png");
                    $('#saveNumber').text(parseInt($('#saveNumber').text()) - 1)
                }
            }
        })
    }

</script>


</body>

</html>